<template>
  <div class="home">
    <Header></Header>
    <nav-bar></nav-bar>
    <el-carousel indicator-position="outside" height="465px" style="width:100%">
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="home-img-box">
             <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2588114105,2711354107&fm=26&gp=0.jpg" alt="">
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="content">
      <title-line title="热门推荐"></title-line>
      <div class="flex-row al-start j-sb">
           <el-carousel indicator-position="none" height="350px" style="width:568px" class="border-6">
            <el-carousel-item v-for="item in 4" :key="item">
              <div class="home-img-box ">
                  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2481321790,3127612340&fm=26&gp=0.jpg" alt="">
                  <p>第七次大庆设计感动中国公益巡演</p>
              </div>
            </el-carousel-item>
          </el-carousel>
          <div class="tuijian-right flex-al al-start">
              <article-proview></article-proview>
              <article-list></article-list>
          </div>
      </div>
    </div>
    <div class="content">
      <div class="zai-xian-ban-li">
        <title-line title="在线办理" ></title-line>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Header from "@/components/Header/index.vue";
import NavBar from "@/components/NavBar/index.vue";
import TitleLine from "@/components/TitleLine/index.vue";
import ArticleProview from "@/components/ArticleProview/index.vue";
import ArticleList from "@/components/ArticleList/index.vue";
@Component({
  components:{
    Header,
    NavBar,
    TitleLine,
    ArticleProview,
    ArticleList
  }
})
    export default class User extends Vue {
        showHello = false;
        name: string = '';
        age: number = 0;
        onShowHelloClick() {
            this.showHello = !this.showHello
        }
    }
</script>
<style lang="less" >
@import '~@/assets/less/flex.less';
@import '~@/assets/less/reset.less';
.zai-xian-ban-li{
  width: 910px;
}
.tuijian-right{
  width:608px;
  height: 350px;
  // background: red;
}
.home{
  width: 100%;
  .flex-al;
  .al-c;
}
  .home-img-box{
    width: 100%;
    height: 100%;
    .flex-al;
    .al-c;
    .j-c;
    overflow: hidden;
    position: relative;
    img{
       width: 100%;
      height: 100%;
      
    }
    p{
      position: absolute;
      z-index: 1;
      left: 20px;
      bottom: 20px;
      color: #fff;
    }
    &:hover img{
      transform: scale(1.01);
    }
   
    &::before{
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      background: #000;
      opacity: 0;
      transition: all 200ms;
     
    }
     &:hover::before{
      opacity: .1;
       transition: all 200ms;
    }
  }
</style>
